<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>微信绑定</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css" />
<style>
	.mui-content{
		height: 100%;
		background-color: #fff;
	}
	.mui-input-group{
		margin-bottom: 50px;
	}
</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">微信绑定</h1>
	</header>
	<div class="mui-content">
		<h1 class="bingdingWx">微信绑定</h1>
		<form class="mui-input-group  mui-table-view-chevron">
			<div class="mui-input-row">
				<label>手机号：</label>
				<input type="number" maxlength="11" id="phone" class="mui-input-clear mui-input" placeholder="请输入手机号">
			</div>
			<div class="mui-input-row" id="code">
				<label>验证码：</label>
				<input type="number"  class="mui-input-clear mui-input" placeholder="请输入短信验证码">
				<button type="button" class="mui-btn mui-btn-primary" data-loading-text="发送中" >获取验证码</button>
			</div>
		</form>
		<div class="mui-content-padded">
			<button type="button" class="mui-btn mui-btn-block mui-btn-primary">确认关联</button>
		</div>
	</div>

<script type="text/javascript" charset="utf-8">
  	mui.init();
  	var phone = document.getElementById('phone');
  	mui('#code').on('tap', '.mui-btn', function(e) {
		mui.toast('已发送')

	});
</script>
</body>
</html>